<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：    语法：任意选择器:hover  每个伪类选择器 ，具备特点
			                   所有元素具备：hover     【常见伪类选择器】
			*/
             h1:hover{
				 color: #7fedcd;
				 background:#7fcdcd;
				 
			 }
			 
			 /* 伪类选择器     ：link   链接未点击时
			                   :active  链接被点击时
			                   :visited  链接被点击后状态
			                   :hover    悬停链接时状态
					主要结合在一起，针对a元素效果
			  */
			  a:link{/* 未访问状态*/
				 color: #7feecd;
				 /* 去掉超链接下划线 */
				 text-decoration: none;
			 }
			 a:active{ /*被点击时状态*/
				 color: #7fcdcd;
				 background: #9fcdff;
			 }
			 a:visited{ /*点击后状态*/
				 color: #ffaaff;
				 background: #7feecd;
			 }
			 a:hover{  /*悬停时状态*/
				 font-size: 36px;
			 }
			 /*
			    伪类选择器  input  focus  获取焦点  鼠标点击输入框时效果
				
				针对 输入框 input元素
			 */
			 input:focus{
				 background: #9fcdff;
			 }
			 /**
			  * 伪类选择器   :first-child  第一个儿子元素
			  *             :last-child  最后一个儿子元素
			  *             :nth-child(n) 匹配n个儿子元素
			  * 针对：父子级 默认  table 列表 
			  */
			 li:first-child{
				 color: #7fcdff;
				 background: #ffaaff;
			 }
			 li:last-child{
				 font-size: 12pt;
				 color: #55aaff;
			 }
			 li:nth-child(2){
				 font-size: 17pt;
				 color: #9fcdff;
				 background: #aaaaff;
			 }
		</style>
	</head>
	<body>
		<h1>鼠标悬停的效果  哈哈</h1>
		<a href="#">超链接</a>
		<input type="text" >
		<!-- 元素之间存在父子级关系 默认存在父子关系 -->
       <ol>
       	<li>唐山</li>
       	<li>邯郸</li>
       	<li>邢台</li>
       	<li>保定</li>
       </ol>
	</body>
</html>